<template>
  <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="碗">
        <el-main class="main">
          2
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="茶壶">
        <el-main class="main">
          <ul>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
          </ul>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="茶杯">
        <el-main class="main">
          <ul>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
          </ul>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="花瓶">
        <el-main class="main">
          <ul>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
            <li>100</li>
          </ul>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="其它">
        <el-main class="main">
          1
        </el-main>
      </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    name: "SidebarTabs",
    data() {
      return {
        tabPosition: 'left',
        items: [{
          name:"碗",
          id:0,
        },{
          name:"茶壶",
          id:1,
        },{
          name:"茶杯",
          id:2,
        },{
          name:"花瓶",
          id:3,
        },{
          name:"其它",
          id:4,
        }],
        currentIndex: 0,
      };
    },
    methods: {
      handleChage(index) {
        this.currentIndex = index;
      },
      a(){
        console.log(1);
      }
    },
  };
</script>

<style scoped>

</style>
